import { Select } from 'antd';
import { getChannelsList } from 'api/articleList';
import React, { useEffect, useState } from 'react';
const { Option } = Select;
/*
  学习目标：下拉框的封装
  步骤：
     1. 问题：自定义表单组件-改造为受控组件：onchange 和 value
     2. 需要把表单元素的value和onChange 托管给From组件，From源码内容会自动管理我们的value和onChange
     3. 原因：因为我们外层套住了一个自定义组件，导致From表单源码控制不了组件的value和onChange，使之不为受控组件
*/
export default function Channel(props) {
  console.log('子组件Channel', props);
  // 获取频道列表数据
  // 异步请求封装
  const [channels, setChannels] = useState([]);
  const handChannels = async () => {
    const res = await getChannelsList();
    // console.log('17res  ----->  ', res);
    setChannels(res.data.channels);
  };
  useEffect(() => {
    // 调用接口获取数据
    handChannels();
  }, []);
  return (
    <>
      {/* {...props} 组件的透传，将传递过来的属性方法，传递给子组件  */}
      <Select style={{ width: 200 }} {...props}>
        {channels.map(item => (
          <Option key={item.id} value={item.id}>
            {item.name}
          </Option>
        ))}
      </Select>
    </>
  );
}
